<template>
  <el-container class="h-100" v-loading="model.loading">
    <el-header class="shadow-sm d-flex justify-content-center bg-white" style="height: 80px;">
      <div class="w-100" style="line-height: 80px;">
        <h5 class="d-inline">核查用户</h5>
        <div class="seach-input">
          <el-input v-model="keywords" placeholder="输入核查用户账号/用户姓名" size="small" style="width: 290px;"
            @keyup.native.enter="newSearch">
            <el-button slot="append" type="primary" style="outline: none;" icon="el-icon-search"
              @click="newSearch"></el-button>
          </el-input>
        </div>
      </div>
    </el-header>
    <el-main class="p-2 m-2 bg-white">
      <el-table :data="model.rows">
        <el-table-column fixed label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span>{{scope.$index + (model.pageIndex - 1) * model.pageSize + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="核查用户账号" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.account }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户姓名" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户类型" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.apptype == 2 ? '核查负责人' : scope.row.apptype == 3 ? '监理': '核查人员' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="作业单位" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.userCompany }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" align="center">
          <template slot-scope="scope">
            <span>{{ $formatDateTime(scope.row.createdDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="checkCred(scope.row)">查看证书</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-show="model.rows.length > 0" class="text-center py-3" @size-change="handleSizeChange"
        @current-change="val => this.model.pageLoad(val)" :current-page="model.pageIndex"
        :page-sizes="[20, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total="model.count"></el-pagination>
    </el-main>

    <el-dialog title="签到详情" :visible.sync="dialogVisible">
      <form>
        <div class="form-group row">
          <label class="col-sm-3 col-form-label text-right">姓名：</label>
          <div class="col-sm-9 pt-2">
            <span class="col-form-label">{{ certificate[0] && certificate[0].userName }}</span>
          </div>
        </div>
        <div class="form-group row" v-viewer>
          <label class="col-sm-3 col-form-label text-right">照片对比：</label>
          <div class="col-sm-9 pt-2">
            <div class="d-inline-block">
              <el-image style="height:150px;width:150px;" :src="getImg('SFZ')" fit="cover">
                <div slot="error" class="image-slot pt-5">
                  <p class="text-center">暂无上传相关照片</p>  
                </div>
              </el-image>
              <p class="text-center">身份证</p>
            </div>
            <div class="d-inline-block ml-2">
              <el-image style="height:150px;width:150px;" :src="getImg('PXZ')" fit="cover">
                <div slot="error" class="image-slot pt-5">
                  <p class="text-center">暂无上传相关照片</p>  
                </div>
              </el-image>
              <p class="text-center">培训证</p>
            </div>
            <div class="d-inline-block ml-2">
              <el-image style="height:150px;width:150px;" :src="getImg('DTZ')" fit="cover">
                <div slot="error" class="image-slot pt-5">
                  <p class="text-center">暂无上传相关照片</p>  
                </div>
              </el-image>
              <p class="text-center">大头照</p>
            </div>
          </div>
        </div>
      </form>
    </el-dialog>
  </el-container>
</template>
<script>
import PagedList from "@/libs/PagedList";

export default {
  name: "inspectuserlist",
  title: "核查用户列表",
  data() {
    return {
      model: new PagedList("survey/user/getUser", 20, {
        type: 2
      }),
      keywords: "",
      dialogVisible: false,
      certificate: [],

    };
  },
  mounted() {
    this.newSearch();
  },
  methods: {
    newSearch() {
      this.model.search({ mix: this.keywords });
    },
    handleSizeChange(pageSize) {
      this.model.pageSize = pageSize;
      this.newSearch();
    },
    checkCred(row) {
      this.$get('survey/certificate/getCertificate', { account: row.account }).then(res => {
        this.certificate = res.data.data
        if (this.certificate.length === 0) {
          this.$message({
            message: '当前核查人员无相关证书',
            type: 'info'
          })
          return
        }
        this.dialogVisible = true
      })
    },
    getImg(type) {
      let url = ''
      this.certificate.forEach(item => {
        if (item.certificateType === type) {
          url = item.path
        }
      });
      return url
    }
  }
};

</script>
<style lang='scss'>
.seach-input {
  float: right;
}
</style>